<template>
  <div>
    <ul>
      <li v-for="(item, index) in imgs" :key="index">
        <img :src="item" alt="" v-mouseenters />
      </li>
    </ul>
    <hr />
    <!-- 扬声器，摄像头 -->

    <div class="grid grid-cols-3 text-center" gap="2" p="y-4">
      <i i-carbon-camera />
      <i i-carbon-microphone />
      <i i-carbon-headphones />

      <div class="title">Camera ({{ cameras.length }})</div>
      <div class="title">Microphones ({{ microphones.length }})</div>
      <div class="title">Speakers ({{ speakers.length }})</div>

      <div>
        <div v-for="i of cameras" :key="i.deviceId" text="sm">
          {{ i.label }}
        </div>
      </div>

      <div>
        <div v-for="i of microphones" :key="i.deviceId" text="sm">
          {{ i.label }}
        </div>
      </div>

      <div>
        <div v-for="i of speakers" :key="i.deviceId" text="sm">
          {{ i.label }}
        </div>
      </div>
    </div>
    <hr />
    <!--  选择文件夹，重置-->
    <button type="button" @click="open()">Choose files</button>
    <button type="button" :disabled="!files" @click="reset()">Reset</button>
    <template v-if="files">
      <p>
        You have selected: <b>{{ files.length }} files</b>
      </p>
      <li v-for="file of files" :key="file.name">
        {{ file.name }}
      </li>
    </template>
  </div>
</template>

<script>
import { useDevicesList } from "@vueuse/core";

import { useFileDialog } from "@vueuse/core";

export default {
  methods: {
    // fa(method, url) {
    //   return new Promise((resolve, reject) => {
    //     let xhr = new XMLHttpRequest();
    //     xhr.open(method, url);
    //     xhr.send();
    //     xhr.onreadystatechange = function () {
    //       if (xhr.readyState == 4 && xhr.status == 200) {
    //         resolve(JSON.parse(xhr.response));
    //       } else if (xhr.readyState == 4) {
    //         reject(xhr.status);
    //       }
    //     };
    //   });
    // },
    open() {},
    reset() {},
  },
  mounted() {
    const {
      videoInputs: cameras,
      audioInputs: microphones,
      audioOutputs: speakers,
    } = useDevicesList({
      requestPermissions: true,
    });
    this.cameras = cameras;
    this.microphones = microphones;
    this.speakers = speakers;

    const { files, open, reset } = useFileDialog();
    this.files = files;
    console.log(files);
    this.open = open;
    this.reset = reset;
  },

  data() {
    return {
      cameras: [],
      microphones: [],
      speakers: [],
      video: {},
      enabled: {},
      files:[],
      imgs: [
        "https://img1.baidu.com/it/u=733487445,1364951041&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1672160400&t=a4567c30f619576607311e8291032b9e",
        "https://img0.baidu.com/it/u=1811490819,3845425068&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=350",
        "https://img0.baidu.com/it/u=2167658858,2699389108&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=400",
        "",
      ],
      scales: 2,
    };
  },
};
</script>

<style lang="scss" scoped>
ul {
  display: flex;
  // border: 1px solid red;
  width: 800px;
  height: 250px;
  justify-content: space-around;
  align-items: center;
  li {
    img {
      width: 150px;
      height: 100px;
      border-radius: 10px;
    }
  }
}

i {
  @apply text-2xl opacity-50 m-auto;
}
.title {
  @apply opacity-50 uppercase tracking-wide text-sm;
}
</style>
